class xCanvas{
    constructor(){
        this.x = 0;
        this.y = 0;
    }
    // 初始化画面内容
    load(res){
        let items = res&&res.items||__Arr__.nodes;
        let type = res&&res.type||"init";
        let isInitial = res&&res.isInitial||"no";//判断是否要重置

        if(type === 'init'){
            this.clear();// 清除画布内容
            __format__.clear();// 清除画布的内容
            for(let i in items){
                items[i].isInitial = isInitial;//判断是否要重置
                __format__.nodeInit(items[i],i);
            }
        }

        this.divEvent();// 注册自定义事件
        this.reset();// 重置节点数据
        this.auto();// 开始无限画布
        this.option();// 操作画布
        __node__.evt();
        __line__.show_contact();
        __opt__.pull();
        $init.initFn();

    }

    // 注册自定义事件
    divEvent(){
        $myEvent.temporaryLineUp    = new Event('temporaryLineUp'); // 连线完成
        $myEvent.scaleChange        = new Event('scaleChange');     // 缩放完成
    }

    // 解析生成节点数据
    reset(){
        $nEls = document.querySelectorAll('.xmd-node');
        for(let el of $nEls){
            let n_w = el.getBoundingClientRect().width,
                n_h = el.getBoundingClientRect().height,
                id  = el.getAttribute('id');

                n_w = n_w/$scale;
                n_h = n_h/$scale;
            
            let i = __DB__.nodes[id].index;
            if(!__Arr__.nodes[i].init)return;
            __Arr__.nodes[i].init.size = {
                w:n_w,
                h:n_h,
            }

            __DB__.nodes[id].init.size = {
                w:n_w,
                h:n_h,
            }
            if(el.getAttribute('id') === "root"){
                let x = $w_e/2 - n_w/2,
                    y = $h_e/2 - n_h/2;
                el.style.left = `${x}px`;
                el.style.top  = `${y}px`;

                __DB__.nodes[id].init.poi = {x,y};
                __Arr__.nodes[i].init.poi = {x,y};

                let itp = __tool__.idTrunPoi(id);//获取节点坐标信息
                __DB__.nodes[id].init.point = itp.point;
                __Arr__.nodes[i].init.point = itp.point;
            }
        }
        
        __node__.reset();//渲染节点
    }

    // 节点模板
    node(res){
        // 自定义节点样式
        let divClass = $init.style.node.class?" "+$init.style.node.class:"";
        if($init.style.node.cls.length > 0){
            $init.style.node.cls.forEach(el=>{
                if(el.id){
                    divClass = res.id === el.id?divClass + " " + el.name:divClass;
                }
                else if(res.clsType === el.type){
                    divClass = divClass + " " + el.name;
                }
            });
        }

        if(res.root)divClass = divClass + " xmd-node-root"; 

        let _node = document.createElement('div');
        _node.setAttribute('id',res.id);
        _node.setAttribute('pid',res.pid);
        _node.setAttribute('class','xmd-node'+divClass);

        let _nodeLabel = document.createElement('div');
        _nodeLabel.setAttribute('class','node-txt');
        // _nodeLabel.setAttribute('contenteditable','true');
        _nodeLabel.innerHTML = res.label;
        
        let _nodeHtml = document.createElement('div');
        _nodeHtml.setAttribute('class','node-html');
        if(res.html && typeof res.html === 'string')_nodeHtml.innerHTML = res.html;

        let _nodeUp = document.createElement('div');
        _nodeUp.setAttribute('class','xmd-node-up');

        let _nodeDown = document.createElement('div');
        _nodeDown.setAttribute('class','xmd-node-down');

        let _nodeIn = document.createElement('div');
        _nodeIn.setAttribute('class','xmd-node-in');

        let _nodeOpt = document.createElement('div');
        _nodeOpt.setAttribute('class','xmd-node-opt');

        _node.appendChild(_nodeLabel);
        _node.appendChild(_nodeHtml);
        _node.appendChild(_nodeUp);
        _node.appendChild(_nodeDown);
        _node.appendChild(_nodeIn);
        _node.appendChild(_nodeOpt);
        
        let id = _node.getAttribute('id');
        if(__DB__.nodes[id].root){
            let _nodePullLeft  = document.createElement('div');
            let _nodePullRight = document.createElement('div');
            _nodePullLeft.setAttribute('class','xmd-node-pull-l');
            _nodePullRight.setAttribute('class','xmd-node-pull-r');
            _node.appendChild(_nodePullLeft);
            _node.appendChild(_nodePullRight);
        }
        else{
            if(__DB__.nodes[id].left){
                let _nodePullLeft = document.createElement('div');
                _nodePullLeft.setAttribute('class','xmd-node-pull-l');
                _node.appendChild(_nodePullLeft);
            }
            else{
                let _nodePullRight = document.createElement('div');
                _nodePullRight.setAttribute('class','xmd-node-pull-r');
                _node.appendChild(_nodePullRight);
            }
        }
        
        
        return _node;
    }

    // 开始无限画布
    auto(){
        $e.onmousedown = (e)=>{
            //获取鼠标按下的坐标
            let x1 = e.clientX,
                y1 = e.clientY;
            
            let nowX = e.target.offsetLeft,
                nowY = e.target.offsetTop;

            //给可视区域添加鼠标的移动事件
            document.onmousemove = (ev)=>{
                document.body.style.cursor='move';
                //获取鼠标移动时的坐标
                let x2 = ev.clientX;
                let y2 = ev.clientY;

                //计算出鼠标的移动距离
                let x = x2 - x1;
                let y = y2 - y1;

                this.x = x;
                this.y = y;

                $e.style.left = (nowX + x) + "px";
                $e.style.top  = (nowY + y) + "px";
            };

            document.onmouseup = (ev)=>{
                document.onmousemove = null;
                document.onmouseup   = null;
                document.body.style.cursor='default';
            };
        }

        $e.onmousewheel = (e)=>{
            let max = $init.scale.max,
                min = $init.scale.min;
            if(e.wheelDelta > 0){
                if($scale > max)return;
                $scale = parseFloat($scale) + 0.1;
                $scale = $scale.toFixed(1);
            }
            else{
                if($scale < min)return;
                $scale = parseFloat($scale) - 0.1;
                $scale = $scale.toFixed(1);
            }
            
            window.dispatchEvent($myEvent.scaleChange);
            $e.style.transform = `scale(${$scale})`;
        }	
    }

    // 操作画布
    option(){
        $e.oncontextmenu = (e)=>{
            e.preventDefault();
            e.stopPropagation();
            __cntMenu__.use({
                type:'canvas',
                x:e.clientX,
                y:e.clientY,
            });
        }
    }

    // 清除画布内容
    clear(){
        $e.innerHTML = "";
    }
}

export default xCanvas;